<template>
  <el-table :data="data" border class="wfull">
    <el-table-column prop="name" label="名称" :width="120" />
    <el-table-column prop="label" label="标签" :width="120" />
    <el-table-column label="类型" :width="80">
      <template #default="{ row }">{{ statTypeOptions[row.type] }}</template>
    </el-table-column>
    <el-table-column prop="declares" label="申明" :width="80" />
    <el-table-column prop="searches" label="条件"/>
    <el-table-column label="操作" :width="100">
      <template #header>
        <OperateBar :operates="['add', 'batch-add','batch-edit']" @add="add" @batch-add="batchAdd" @batch-edit="batchEdit" />
      </template>
      <template #default="{ row }">
        <OperateBar :operates="['edit','remove']" @edit="edit(row.name)" @remove="remove(row.name)" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
  import { getAction, getSeed } from '@/views/seed-dev'
  import { ElTable, ElTableColumn } from 'element-plus'
  import { computed } from 'vue';
  import { getInitData, StatBatchCreator, StatEditor, statTypeOptions } from '..';
  import { open } from '@/components/Popup';
  import StatCreator from './StatCreator.vue';
  import { OperateBar } from '../../OperateBar';
  import StatBatchEditor from './StatBatchEditor.vue';

  const props = defineProps<{seedName?: string, actionName?: string}>()
  const data = computed(() => getInitData(props.seedName, props.actionName))

  function add() {
    open({title: '新增统计'}, StatCreator, {seedName: props.seedName, actionName: props.actionName})
  }

  function batchAdd() {
    open({title: '批量新增统计', fullscreen: true}, StatBatchCreator, {seedName: props.seedName, actionName: props.actionName})
  }

  function batchEdit() {
    open({title: '批量编辑统计', fullscreen: true}, StatBatchEditor, {seedName: props.seedName, actionName: props.actionName})
  }

  function edit(statName: string) {
    open({title: '编辑统计'}, StatEditor, {seedName: props.seedName, actionName: props.actionName, statName})
  }

  function remove(statName: string) {
    if(props.seedName) {
      const seed = getSeed(props.seedName)
      if(props.actionName) {
        delete seed.actions[props.actionName].stats?.[statName]
      } else {
        delete seed.stats?.[statName]
      }
    } else {
      delete getAction(props.actionName).stats?.[statName]
    }
  }
</script>